<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品维护</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <style type="text/css">
        .table td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">
        <img src="/img/logo.png" height="30" class="d-inline-block align-top" alt="">
        Mall电商运营平台
    </a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="/product/DataView">数据看板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="/product/List">商品维护</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="/user/List">会员管理</a>
        </li>
    </ul>
    <span class="navbar-text"><a class="nav-link " th:href="@{/adminInfo(name=${userName})}"><i
            class="fa fa-user"></i>个人中心[<span th:text="${userName}"></span>]</a></span>
</nav>
<div class="container-fluid" style="margin-top: 100px;">
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light text-center">
                            电商平台销售趋势
                        </div>
                        <div class="card-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5><span style="font-size: 16px;"
                                              class="label label-success">电商平台销售趋势</span></h5>
                                </div>
                                <div class="ibox-content">
                                    <div id='lineChart' style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 按钮组 -->
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <a href="javascript:void(0);" onclick="batchDelete()" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash-o"></i> 批删除</a>
            <a href="/product/Add" class="btn btn-outline-success btn-sm"><i class="fa fa-arrow-up"></i> 添加</a>
            <a href="/export" class="btn btn-outline-success btn-sm"><i class="fa fa-file-excel-o"></i> 导出</a>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <table class="table text-center table-sm table-bordered table-hover">
                <thead>
                <tr class="bg-light text-center">
                    <th><input type="checkbox" name="id" id="id"></th>
                    <th><span class="align-self-md-auto">商品名</span></th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>状态</th>
                    <th>入库时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="productItem : ${productItemList}">
                    <td class="text-center">
                        <input type="checkbox" name="selectedProducts" class="item-checkbox" th:value="${productItem.id}">
                    </td>
                    <td th:text="${productItem.productName}"/>
                    <td th:text="${productItem.price}"/>
                    <td th:text="${productItem.stock}"/>
                    <td th:text="${productItem.status}?'上架':'下架'" class="badge badge-warning "/>
                    <td th:text="${productItem.launchDate}"/>
                    <td>
                        <a th:id="'statusButton_' + ${productItem.id}" class="btn btn-sm btn-outline-success" href="#"
                           th:href="@{/updateStatus(id=${productItem.id})}">
                            <i class="fa fa-arrow-up"></i><span th:text="${productItem.status} ? '下架' : '上架'"></span>
                            </span>
                        </a>
                        <a class="btn btn-sm btn-outline-danger" href="#" th:href="@{/deletep(id=${productItem.id})}"><i class="fa fa-trash-o"></i>删除</a>
                        <a class="btn btn-sm btn-outline-info" href="#" th:href="@{/editInfo(id=${productItem.id})}"><i class="fa fa-edit"></i>编辑</a>
                        <a class="btn btn-sm btn-outline-info" href="#" th:href="@{/Pinfo(id=${productItem.id})}"><i class="fa fa-info"></i>查看</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6" style="text-align: center">
            <!-- 检查当前页码是否大于1，小于等于总页数 -->
            <a class="btn btn-outline-primary" th:if="${currentPage > 1}" th:href="@{/product/List(pageNum=${currentPage - 1})}">上一页</a>
            <!-- 检查当前页码是否小于总页数 -->
            <a class="btn btn-outline-primary" th:if="${currentPage < pages}" th:href="@{/product/List(pageNum=${currentPage + 1})}">下一页</a>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<!-- 引入百度Echarts -->
<script src="/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function batchDelete() {
        // 获取所有选中的复选框
        var selectedCheckboxes = document.getElementsByName('selectedProducts');
        var selectedIds = [];
        // 遍历复选框，收集选中的ID
        for (var i = 0; i < selectedCheckboxes.length; i++) {
            if (selectedCheckboxes[i].checked) {
                selectedIds.push(selectedCheckboxes[i].value);
            }
        }
        // 将收集到的ID数组转换为字符串
        var idsParam = selectedIds.join(',');
        // 发送请求
        fetch('/deleteBatch?ids=' + encodeURIComponent(idsParam), {
            method: 'DELETE',
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('');
                }
                alert('批量删除成功!');
                window.location.reload();
            })
            .catch(error => {
                alert('批量删除失败，请重试!');
            });
    }
</script>

<script type="text/javascript">
    $(function () {
        // 当含有"删除"文本的链接被点击时触发的函数
        $(function(){
            $("a:contain(删除)")
        })

        /* 折线图 */
        // 初始化图表实例
        var myChart = echarts.init(document.getElementById('lineChart'));

        // 发起fetch请求获取数据
        fetch('/api/data')
            .then(response => {
                if (!response.ok) throw new Error('');
                return response.json();
            })
            .then(data => {
                option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['销售量', '访问量']
                    },
                    toolbox: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        name: '/月份', // 添加单位
                        // data: data.months
                        data: data[0]
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    }],
                    series: [
                        {
                            name: '销售量',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: data[1]
                            // data: data.sales
                        },
                        {
                            name: '访问量',
                            type: 'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {},
                            data: data[2]
                            // data: data.visits
                        }
                    ]
                };
                myChart.setOption(option);
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    });
</script>

</body>
</html>
